/**
* @名称:管理员看到的商品详情界面
* @作者:陈博宇、晋尧
* @创建时间：2021/7/21
* @修改时间：2021/7/22
*/

<template>
	<view class="main">
		<!-- 头部状态栏 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 176rpx; height: 99rpx;" fit="cover" class="logo">
			<view class="navitems">
				<el-badge :value="messageNum" class="navitem" hidden="messageNum==0">
					<view @click="jumpToMessage">消息</view>
				</el-badge>
				<view class="navitem" @click="logOut">退出登录</view>
			</view>
		</view>
		<!-- 商品主要信息 -->
		<view class="detail">
			<!-- 商品简介图 -->
			<view class="goodsImg">
				<el-image style="width: 400px; height: 400px" :src='"http:////47.96.168.135:7388"+imgSrc[0].url'
					:fit="contain"></el-image>
			</view>
			<!-- 商品部分信息 -->
			<view class="goodsParam">
				<!-- 商品名 -->
				<div class="shopRow goodsParamHeight">
					<h2>{{ goodsName }}</h2>
				</div>
				<!-- 店铺名 -->
				<div class="shopRow goodsParamHeight">
					<el-button type="text" class="shop_button goodsParamHeight"><em>{{ shopName }}</em></el-button>
				</div>
				<!-- 描述 -->
				<div class="descriptionRow goodsParamHeight">{{ description }}</div>
				<!-- 日租 -->
				<view class="prize_bar goodsParamHeight">
					<p>日租：</p>
					<div class="show_prize fl">￥<em>{{ settings[radio-1].price }}</em></div>
				</view>
				<!-- 配置 -->
				<view class="setting_bar goodsParamHeight">
					<p>选择配置：</p>
					<div class="show_row">
						<el-radio v-for="(setting,index) in settings" :key="index" v-model="radio" :label="index+1"
							border>{{ setting.value }}</el-radio>
					</div>
				</view>
				<!-- 库存 -->
				<view class="left_bar goodsParamHeight">
					<p>库存：</p>
					<div class="show_left fl">{{ settings[radio-1].stock }}</div>
				</view>
				<!-- 当前上架状态 -->
				<view class="state_bar goodsParamHeight">
					<p>状态：</p>
					<div class="show_left fl">
						<el-tag type="warning" effect="dark" :type=type>{{state}}</el-tag>
					</div>
				</view>
				<!-- 审核按钮 -->
				<view class="button_bar goodsParamHeight">
					<el-button type="primary" class="show_button" :disabled="state!='待审核'" @click="approved()">通过审核
					</el-button>
					<el-button type="danger" class="show_button" :disabled="state=='未通过'" @click="dialogVisible = true">
						拒绝通过
					</el-button>
				</view>
			</view>
		</view>
		<!-- 拒绝通过的对话框 -->
		<el-dialog title="拒绝通过原因:" :visible.sync="dialogVisible" width="30%">
			<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" v-model="reasonText"
				placeholder="输入原因后才能提交哦">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" :disabled="reasonText===''" @click="failPass()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 下部商品介绍图 -->
		<view class="pageButton">
			<view class="pageButton_content">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="商品详情" name="first">
						<view class="detailImg">
							<img v-for="(item,index) in imgSrc2" v-bind:key='index'
								:src='"http:////47.96.168.135:7388"+item.url' alt="" />
						</view>
					</el-tab-pane>
				</el-tabs>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageId: 1,
				goodsName: 'default',
				shopName: 'default',
				description: 'default',
				radio: 1,
				num: 1,
				jsonDate: '',
				activeName: 'second',
				imgSrc: ['http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000614364454_4_800x800.jpg'],
				imgSrc2: ['http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000614364454_4_800x800.jpg'],
				arr: [],
				settings: [{
						value: "配置1",
						id: 1,
						price: 16,
						deposit: 1,
						leftnum: 100,
					},
					{
						value: "配置2",
						id: 2,
						price: 18,
						deposit: 1,
						leftnum: 10,
					},
					{
						value: "配置3",
						id: 3,
						price: 17,
						deposit: 1,
						leftnum: 1000,
					},
					{
						value: "配置4",
						id: 4,
						price: 8,
						deposit: 1,
						leftnum: 100,
					},
				],
				jsonSettings: '',

				state: '',
				type: '',

				dialogVisible: false,
				reasonText: '',


			};
		},

		created: function() {
			this.judgeIsNull();
		},

		onLoad: function(option) {
			this.pageId = option.id;
			this.getData();
		},

		methods: {

			//向服务器请求商品数据
			async getData() {
				var that = this;
				await this.$axios({
					methods: 'get',
					url: '/SKU/getOne?Id=' + this.pageId,
				}).then(res => {
					that.arr = res.data.date;
				}).catch(err => {
				})
				this.goodsName = that.arr.name;
				this.shopName = that.arr.storeName;
				this.settings = that.arr.skuSpecificationOptions;
				this.description = that.arr.subTitle;
				this.imgSrc = that.arr.skuImages;
				this.imgSrc2 = that.arr.skuSpecificationImages;
				this.state = that.arr.state;
				switch (this.state) {
					case '未通过':
						this.type = 'danger';
						break;
					case '待审核':
						this.type = 'warning';
						break;
					case '已上架':
						this.type = 'success';
						break;
					case '已下架':
						this.type = 'info';
						break;
				}
			},

			//判断商品信息是否为空
			judgeIsNull() {
				if (this.goodsName == '') {
					this.goodsName = 'default'
				} else if (this.shopName == '') {
					this.shopName = 'default'
				} else if (this.settings == []) {
					this.settings = [{
						value: "配置1",
						id: 1,
						price: 16,
						stock: 100,
					}]
				} else if (this.description == '') {
					this.description = '111'
				} else if (this.imgSrc == '') {
					this.imgSrc = ''
				}

			},

			// 同意审核通过
			approved() {
				this.$confirm('此操作将同意该商品上架, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
						methods: 'get',
						url: "/Admin/ModifyState?NewState=已上架&SkuId=" + this.pageId,
					}).then((res) => {
						this.$message({
							type: 'success',
							message: '上架成功!'
						});
						this.getData();
					}).catch(err => {

					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消同意'
					});
				});
			},

			// 审核不通过
			failPass() {
				this.$confirm('此操作将拒绝该商品上架, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
						method: "post",
						url: "/Admin/SendMessage",
						data: {
							"details": this.reasonText,
							"sku": {
								"id": this.pageId,
							}
						}
					}).then((res) => {
						this.$axios({
							methods: 'get',
							url: "/Admin/ModifyState?NewState=未通过&SkuId=" + this.pageId,
						}).then((res) => {
							this.$message({
								type: 'success',
								message: '拒绝成功!'
							});
							this.dialogVisible = false;
							this.getData();
						}).catch(err => {

						})
						this.getData();
					}).catch(err => {

					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消拒绝'
					});
					this.dialogVisible = false;
				});
			}


		},
	};
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		justify-content: center;
		align-items: center;
		float: left;
	}

	/* 顶栏style */
	.header {
		width: 100%;
		height: 99rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.logo {
		margin-left: 5%;
	}

	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}

	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	.detail {
		width: 100%;
		height: 250px;
		display: flex;
		background-color: white;
		transform: translateY(20px);
	}

	.goodsImg {
		width: 300px;
		height: 300px;
		float: left;
		transform: translateX(200px);
	}

	.goodsImg_content {
		margin-left: 40px;
		max-width: 400px;
		width: expression(this.width>300?"300px":this.width);
		max-height: 400px;
		height: expression(this.height>300?"300px":this.height);
	}

	.goodsParam {
		float: right;
		/* display: flex; */
		width: 700px;
		height: 300px;
		transform: translateX(400px);
	}

	.prize_bar {
		width: 100%;
		display: flex;
		padding-left: 0px;
	}

	.show_prize {
		font-size: 20px;
		color: #ff3e3e;
		padding-left: 50px
	}

	.goodsParamHeight {
		height: 60px;
	}

	.setting_bar {
		display: flex;
		padding-left: 0px;
	}

	.show_row {
		padding-left: 20px;
		display: flex;
		width: 300rpx;
		flex-direction: row;
	}

	.descriptionRow {
		width: 100%;
		float: left;
		transform: translateY(5px);
	}

	.button_bar {
		display: flex;
		padding-left: 0px;
	}

	.show_button {
		height: 50px;
		width: 200px;
	}

	.pageButton {
		width: 100%;
		height: 40px;
		background-color: #EEEEEE;
		transform: translateY(220px);
	}

	.pageButton_content {
		margin-left: 240px;

	}

	.goodsImgBar {
		background-color: #EEEEEE;
		width: 400px;
		margin-top: 20px;
		height: 100px;
		transform: translateX(30px);
		position: relative;
	}

	.ImgList {
		height: 100%;
		width: 100%;
		overflow: hidden;
		position: absolute;
	}

	.listItem {
		width: 20%;
		height: 100%;
	}

	.show_left {
		font-size: 20px;
		padding-left: 50px;
	}

	.left_bar {
		display: flex;
		padding-left: 0px;
	}

	.state_bar {
		display: flex;
		padding-left: 0px;
	}

	.shopRow {
		width: 50%;
		float: left;
		display: flex;
	}

	.show_radioButton {
		margin-left: 10px;
	}

	.detailImg {
		width: 70%
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}
</style>
